@import 'open-props/postcss/style';
@import 'open-props/postcss/normalize';

:root {
  font-family: var(--font-sans);
  body {
    background-color: var(--gray-9);
    display: grid;
    place-content: center;
    height: 100vh;
    width: 100vw;
  }
}

#app {
  font-weight: bold;
  width: max-content;
  color: 0 0 0 var(--gray-6);
  position: relative;
  text-transform: uppercase;
  font-size: 100px;
  &::after {
    content: attr(data-content);
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      to right,
      rgb(236, 72, 153),
      rgb(239, 68, 68),
      rgb(234, 179, 8)
    );
    background-clip: text;
    color: transparent;
    clip-path: ellipse(100px 100px at 0% 50%);
    animation: hd 3s ease-in infinite;
    text-transform: uppercase;
  }

  @keyframes hd {
    50% {
      clip-path: ellipse(100px 100px at 100% 50%);
    }
    to {
      clip-path: ellipse(100px 100px at 0% 50%);
    }
  }
}
